<template>
	<view>
		<u-navbar :is-back="!0" back-icon-color="#fff" title="等级规则" :border-bottom="false" title-color="#fff" :background="{}"></u-navbar>
		
		<view class="cur-level" v-if="item.is_Cur" v-for="(item,index) in list" :key='index'>
			<image @click="open(item)" :src="item.cover"></image>
		</view>
		<view class="head-img">
			<image v-if="imgUrl" :src="imgUrl + 'level-title.png'"></image>
		</view>
		<view class="list">
			<view class="content u-flex">
				<image @click="open(item)" :src="item.cover" v-for="(item,index) in list" :key='index' :class="{active:index === 0}"></image>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
		
		<u-popup v-model="show" mode="center" border-radius="20" closeable>
			<view class="pop-content">
				<view class="title">
					<text>{{item.levelName}}会员</text>
					<image class="num1" src="/static/title-left.png"></image>
					<image class="num2" src="/static/title-right.png"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;padding-bottom: 20rpx;">
					<view class="nr">{{item.remark}}</view>
				</scroll-view>
				<view class="btn-wrap" @click="jump('/pages/mine/account?show=1')">充值成会员</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',
				list:'',
				data:'',
				show:!1,
				item:''
			}
		},
		methods: {
			open(item){
				this.show = !0
				this.item = item
			}
		},
		onLoad() {
			this.imgUrl = this.$app.imgUrl
			this.$store.dispatch('userInfo',this).then(res=>{
				let id = res.levelId
				this.$u.api.level().then(res=>{
					res.forEach(item=>{
						if(item.id === id){
							item.is_Cur = !0
						}
					})
					this.list = res
				})
			})
		}
	}
</script>

<style lang="scss">
	page{
		background: #1098e6 url(#{$imgUrl}/level-bg.png) no-repeat 0 0;
		background-size: 100% auto;
	}
	.cur-level{
		height: 386rpx;box-sizing: content-box;padding-top: 30rpx;
		image{display: block;margin: 0 auto;width: 251rpx;height: 386rpx;position: relative;
			&::after{color: #1782d3;content: '我的等级';position: absolute;left: 50%;bottom: 10rpx;transform: translateX(-50%);font-size: 30rpx;font-weight: bold;}
		}
	}
	.head-img{
		height: 105rpx;
		image{display: block;width: 100%;height: 105rpx;}
	}
	.list{position: relative;top: -54rpx;
		.content{
			background-color: #fff;width: 620rpx;margin: 0 auto;flex-wrap: wrap;justify-content: space-around;
			padding: 10rpx 0;border-radius:  0 0 80rpx 10rpx;
			&::after{content: '';display: block;width: 100%;position: relative;top: 30rpx;border-radius:  0 0 80rpx 10rpx;background-color: #80c5e7;z-index: -1;height: 100rpx;}
			image{
				display: block;width: 251rpx;height: 386rpx;padding: 10rpx 0;
			}
			.active{padding-left: 80rpx;padding-right: 80rpx;position: relative;
				&::after{content: '最高等级';position: absolute;left: 50%;bottom: 20rpx;transform: translateX(-50%);color: #e69714;font-size: 30rpx;font-weight: bold;}
			}
		}
	}
	.pop-content{
		.title{text-align: center;font-weight: bold;padding: 20rpx 0;position: relative;font-size: 32rpx;
			.num1{width: 22rpx;height: 28rpx;display: block;position: absolute;left: 190rpx;top: 30rpx;}
			.num2{width: 22rpx;height: 28rpx;display: block;position: absolute;right: 190rpx;top: 30rpx;}
		}
		width: 640rpx;
		padding-bottom: 30rpx;
		.nr{padding:14rpx 20rpx;text-align: justify;word-break: break-all;background-color: #FFF1E5;border-radius: 20rpx;margin: 0 30rpx;font-size: 30rpx;color: #333;font-weight: bold;line-height: 1.6;}
		.btn-wrap{
			border-radius: 100rpx;margin: 0 auto;
			height: 80rpx;width: 500rpx;line-height: 80rpx;color: #fff;text-align: center;font-weight: bold;font-size: 30rpx;
			background: linear-gradient(90deg, #DCA54F 0%, #BE7B15 100%);
		}
	}
</style>
